<template>
  <YsRow>
    <div class="photos-title border_style">
      <p class="text_01">射线检测结果及评定表</p>
    </div>
    <div class="photos-table border_style">
      <YsTable class="table" :columns="tableColumn" :border="true" width="100%" :data="tableData"> </YsTable>
    </div>
  </YsRow>
</template>
<script>

import { mapGetters, mapActions } from "vuex";
export default {
  name: 'twoTemplate',
  props: {
    templateBean: {
      type: Object,
      default: () => {
        return {}
      }
    },
    reportDataBean: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    //获取表头
    templateBean(v) {
      if (v && v.templateFields2) {
        this.template2 = v.templateFields2.map(v => { return { ...v, isRptEdit: false } })
        this.getTableColumn(this.template2)
      }
    },
    //获取表格body
    reportDataBean(v) {
      if (v) {
        let tData = v.table_field_data2 || []
        for (var i = 0; i < tData.length; i++) {
          let curItem = tData[i]
          for (var j = 0; j < curItem.values.length; j++) {
            let val = curItem.values[j]
            curItem[val.column_id] = val.value
          }
        }
        this.tableData = tData
      }
    }
  },
  data() {
    return {
      template2: [],
      isRptEdit: true,
      tableColumn: [],
      templateFields2: [],
      tableData: [],
      operateTelData: [],
      volumeTypes: [],
      pingJiList: [
        { id: 1, name: 'Ⅰ级' },
        { id: 2, name: 'Ⅱ级' },
        { id: 3, name: 'Ⅲ级' },
        { id: 4, name: 'Ⅳ级' },
      ]
    }
  },
  created() {
    this.getQueXianLeiXing()
  },
  methods: {
    ...mapActions(["getqxjcPageFlawType"]),
    getQueXianLeiXing() {
      let _this = this;
      _this.getqxjcPageFlawType({ limit_recd: 99999 }).then((res) => {
        let { data, msg, scode, status } = res;
        if (status === "ok") {
          this.volumeTypes = data.flawTypeInfos
        } else {
          _this.$YsMessage.error(msg);
        }
      }).catch((err) => {
        _this.$YsMessage.error("获取数据失败");
      });
    },
    getTableColumn(list) {
      this.tableColumn = []
      list.map(v => {
        this.tableColumn.push({
          title: v.field_name,
          key: v.field_id,
          align: 'center',
          column_1: v,
          render: (h, params) => {
            if (params.row.isRptEdit) {
              if (params.column.title == "缺陷性质") {
                return h("div", {}, [
                  h("Select", {
                    props: {
                      transfer: true,
                      // value: this.tableData[params.index][params.column.key],
                      value: this.tableData[params.index][params.column.key],
                      size: "small",
                    },
                    on: {
                      'on-change': (data) => {
                        this.tableData[params.index][params.column.key] = data
                      }
                    }
                  }, this.volumeTypes.map(function (type) {//这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                    return h('Option', {
                      props: {
                        label: type.type_name,
                        value: type.id
                      }
                    }, type);
                  })),
                ])
              } else if (params.column.title == "评定"||params.column.title == "专家复核") {
                return h("div", {}, [
                  h("Select", {
                    props: {
                      transfer: true,
                      value: this.tableData[params.index][params.column.key],
                      size: "small",
                    },
                    on: {
                      'on-change': (data) => {
                        this.tableData[params.index][params.column.key] = data
                      }
                    }
                  }, this.pingJiList.map(function (type) {//这个数组需要在data中定义,里面是一个个对象,每个对象里面应当包含value属性(因为要用到)
                    return h('Option', {
                      props: {
                        label: type.name,
                        value: type.id
                      }
                    }, type);
                  })),
                ])
              } else {
                return h("div", {}, [
                  h("YsInput", {
                    props: {
                      data_obj: v,
                      value: this.tableData[params.index][params.column.key],
                      size: "small",
                    },
                    on: {
                      'on-change': (event) => {
                        this.tableData[params.index][params.column.key] = event.target.value
                      }
                    }
                  }),
                ])

              }
            } else {
              
              return h("div", {}, [
                h("span", {}, this.tableData[params.index][params.column.key]),
              ])
            }
          }
        })
      })
      this.tableColumn.unshift({
        title: "序号",
        type: 'index',
        align: 'center',
      })
      this.tableColumn.push({
        title: "操作",
        width: 150,
        renderHeader: (h, params) => {
          return h('div', {}, [
            h('span', [
              h('span', '操作'),
              h('i', {
                class: 'icon iconfont icon-tianjia',
                style: {
                  fontSize: '16px',
                  marginTop: '5px',
                  marginLeft: '5px',
                  marginRight: '14px',
                },
                on: {
                  click: (event) => {
                    this.addTableFn()
                  },
                },
              })
            ])
          ])
        },
        render: (h, params) => {
          return h(
            "div",
            {
              attrs: { class: "mouse-on" },
            },
            [
              h("span", {
                on: {
                  click: (event) => {
                    this.$set(this.tableData[params.index], 'isRptEdit', true)
                  },
                },
                class: `textColor`,
                style: {
                  fontSize: "16px",
                  margin: "0 0 0 8px",
                },
              }, '编辑'),
              h("span", {
                class: `textColor`,
                on: {
                  click: (event) => {
                    this.deleteEvaluate(params.row)
                  },
                },
                style: {
                  fontSize: "16px",
                  margin: "0 0 0 8px",
                },
              }, '删除'),
            ]
          );
        },
        tooltip: true
      })
    },
    //删除
    deleteEvaluate(item) {
      let [reportRem] = this.tableData.splice(item._index, 1)
      let reportDetailBeans = reportRem.values.map(v => { return { id: v.row_id, report_val: v.value } })
      let remData = {
        id: reportRem.row_id,
        operator_type: 2, //操作标识：1-新增，2-删除，编辑可随意传
        reportDetailBeans: reportDetailBeans
      }
      this.operateTelData.push(remData)
    },
    //新增
    addTableFn() {
      let obj = {}
      let data = this.tableColumn.map(v => { return v.key })
      obj.isRptEdit = true
      data.map(v => { obj[v] = "" })

      this.tableData.push(obj)
    },
    //获取数据
    getoPerateTel() {
      this.tableData.map(v => {
        if (v.row_id) { //编辑
          if (v.isRptEdit) {
            let ObjArr = Object.keys(v)
            let exitItem = {
              id: v.row_id,
              file_id: this.$route.query.file_id,
              tp_id: this.$route.query.template_id,
              data_class: "",
              tf_id: "",
              operator_type: 3,
              reportDetailBeans: []
            }


            ObjArr.map(item => {
              let newData = this.template2.find(it => it.field_id == item)
              let obj = v.values.find(it => it.column_id == item)
              if (newData) {
                exitItem.tf_id = newData.id
                exitItem.data_class = newData.field_class
                exitItem.reportDetailBeans.push({
                  id: obj.row_id,
                  field_id: obj.column_id,
                  report_val: v[item]
                })
              }
            })

            this.operateTelData.push(exitItem)
          }
        } else { //新增
          let ObjArr = Object.keys(v)
          let reportItem = {
            id: "",
            file_id: this.$route.query.file_id,
            tp_id: this.$route.query.template_id,
            data_class: "",
            tf_id: "",
            operator_type: 1,
            reportDetailBeans: []
          }
          ObjArr.map(item => {
            let newData = this.template2.find(it => it.field_id == item)
            if (newData) {
              reportItem.tf_id = newData.id
              reportItem.data_class = newData.field_class
              reportItem.reportDetailBeans.push({
                id: "",
                field_id: item,
                report_val: v[item]
              })
            }
          })

          let flag = reportItem.reportDetailBeans.every((item, index) => { return item.report_val == "" })

          if (!flag) {
            this.operateTelData.push(reportItem)
          }
        }
      })
    }
  }
}
</script>
<style scoped lang='less'>
.photos-title {
  height: 93px;
  width: 100%;
  border: 1px solid #e1e6f0;
  border-top: none;
  border-bottom: none;
  line-height: 93px;
  position: relative;
  p {
    text-align: center;
    font-size: 20px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    font-size: 16px;
  }
  span {
    position: absolute;
    right: 16px;
    bottom: 0px;
    height: 30px;
    line-height: 30px;
  }
}

.photos-table {
  border: 1px solid #e1e6f0;
  .table {
    width: 100%;
  }
  /deep/.ivu-table-wrapper {
    box-shadow: none;
  }
}

/deep/ .textColor {
  cursor: pointer;
  color: #0091ff;
  &:hover {
    opacity: 0.8;
  }
}
</style>
